<style lang='scss' scoped>
	.shoucang {
		font-size: 26rpx;

		.nav {
			display: flex;

			view {
				flex: 1;
				text-align: center;
				height: 100rpx;
				line-height: 100rpx;
			}

			.active {
				color: red;
				border-bottom: 1rpx solid red;
			}
		}
		.shoucangNavlist {
			display: flex;
			background-color: #ccc;

			view {
				background-color: #fff;
				padding: 20rpx;
				margin: 20rpx;
			}

			.active {
				border: red 1rpx solid; 
			}
		}
		.kong {
			image {
				width: 100%;
			}
		}
		.warp {
			height: calc(100vh - 220rpx);
			overflow: auto;

			.list {
				display: flex;
				padding: 30rpx;
				box-sizing: border-box;
				border-bottom: #ccc solid 1rpx;

				image {
					width: 250rpx;
					box-sizing: border-box;
					padding: 20rpx;
					height: 200rpx;
				}

				.right {
					flex: 1;
					display: flex;
					justify-content: space-between;
					flex-flow: column;
					padding: 20rpx 0;

					view {
						display: -webkit-box;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical;
					}

					.text {
						color: red;
						display: flex;
						align-items: center;
						justify-content: space-between;

						text {
							background-color: blueviolet;
							color: white;
							display: inline-block;
							padding: 10rpx;
							border-radius: 15rpx;
						}
					}
				}
			}
		}
	}
</style>
<template>
	<view class='shoucang'>
		<view class="nav">
			<view v-for="(item,index) in navlist" :key="index" @click="navtab(index)"
				:class="{active:navIndex == index}">
				{{item}}
			</view>
		</view>

		<header v-if="navIndex == 0">
			<view class="kong" v-if="shouchanglist.length == 0">
				<image
					src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2Fc6ac03e15f4b5efc7e2a268970ce660baab1ba21.jpg_320x200.jpg&refer=http%3A%2F%2Fi1.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663241098&t=7025eb03c453abb6dd9a6f7d5944feed"
					mode="widthFix"></image>
			</view>
			<view class="shoucangNavlist" v-else>
				<view v-for="(item,index) in shoucangNavlist" :key="index" @click="shoucangNavtab(index)"
					:class="{active:shoucangNavIndex==index}">
					{{item}}
				</view>
			</view>
			<view class="warp">
				<view class="list" v-for="(item,index) in shouchanglist" :key="index">
					<image :src="item.img || '../../static/52b1464290643af26775f95b539de4c0.jpeg'"></image>
					<view class="right">
						<view>
							{{item.name}}
						</view>
						<view class="text">¥{{item.price}} <text @click.stop="quxiao(index)">取消收藏</text> </view>
					</view>
				</view>
			</view>
		</header>
		<header v-if="navIndex == 1">
			1111
		</header>
		<header v-if="navIndex == 2">
			2222
		</header>
		<header v-if="navIndex == 3">
			3333
		</header>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navlist: [
					'商品收藏',
					'品牌收藏',
					'店铺收藏',
					'浏览器足迹',
				],
				navIndex: 0,
				shoucangNavlist: [
					'全部',
					'正在热卖',
					'即将上线',
				],
				shoucangNavIndex: 0,
				shouchanglist: []
			}
		},
		onLoad(o) {},
		onShow() {
			let shouchanglist = uni.getStorageSync('shouchanglist') || []
			this.shouchanglist = shouchanglist
			console.log(shouchanglist);
		},
		methods: {
			navtab(index) {
				this.navIndex = index
			},
			shoucangNavtab(index) {
				this.shoucangNavIndex = index
			},
			quxiao(index) {
				this.shouchanglist.splice(index, 1)
				uni.setStorageSync('shouchanglist', this.shouchanglist)
				uni.showToast({
					title: "已取消收藏",
					mask: true,
					icon: "none"
				})
			}
		}
	}
</script>
